<template>
  <div class="question">
    <el-card>
      <el-form :model="form" inline label-width="80px" ref="form">
        <el-row>
          <el-col :span="5">
            <el-form-item label="学科" prop="subject">
              <el-select v-model="form.subject" placeholder="请选择学科">
                <el-option
                  v-for="(item,index) in subList"
                  :key="index"
                  :value="item.id"
                  :label="item.name"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="5">
            <el-form-item label="阶段" prop="step">
              <el-select v-model="form.step" placeholder="请选择阶段">
                <el-option
                  v-for="(value,key,index) in stepObj"
                  :key="index"
                  :value="+key"
                  :label="value"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="5">
            <el-form-item label="企业" prop="enterprise">
              <el-select v-model="form.enterprise" placeholder="请选择企业">
                <el-option
                  v-for="(item,index) in busList"
                  :key="index"
                  :value="item.id"
                  :label="item.name"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="5">
            <el-form-item label="题型" prop="type">
              <el-select v-model="form.type" placeholder="请选择题型">
                <el-option
                  v-for="(value,key,index) in typeObj"
                  :key="index"
                  :value="+key"
                  :label="value"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="4"></el-col>
        </el-row>
        <el-row>
          <el-col :span="5">
            <el-form-item label="难度" prop="difficulty">
              <el-select v-model="form.difficulty" placeholder="请选择难度">
                <el-option
                  v-for="(value,key,index) in diffObj"
                  :key="index"
                  :value="+key"
                  :label="value"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="5">
            <el-form-item label="作者" prop="username">
              <el-input v-model="form.username"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="5">
            <el-form-item label="状态" prop="status">
              <el-select v-model="form.status" placeholder="请选择状态">
                <el-option :value="0" label="禁用"></el-option>
                <el-option :value="1" label="启用"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="5">
            <el-form-item label="日期" prop="create_date">
              <el-date-picker v-model="form.create_date" type="date" placeholder="选择日期"></el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="4"></el-col>
        </el-row>
        <el-row>
          <el-col :span="10">
            <el-form-item label="标题" prop="title" class="title">
              <el-input v-model="form.title"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="14">
            <el-form-item label-width="10px">
              <el-button type="primary" @click="search">搜索</el-button>
              <el-button @click="reset">清除</el-button>
              <el-button type="primary" @click="add">+新增试题</el-button>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </el-card>
    <el-card class="table">
      <el-table :data="questionList">
        <el-table-column label="序号">
          <template slot-scope="scope">{{pagination.pageSize*(pagination.currentPage-1)+scope.$index+1}}</template>
        </el-table-column>
        <el-table-column label="题目">
          <template slot-scope="scope">
            <div v-html="scope.row.title"></div>
          </template>
        </el-table-column>
        <el-table-column label="学科.阶段">
          <template slot-scope="scope">{{scope.row.subject_name}}.{{stepObj[scope.row.step]}}</template>
        </el-table-column>
        <el-table-column label="题型">
          <template slot-scope="scope">{{typeObj[scope.row.type]}}</template>
        </el-table-column>
        <el-table-column label="企业" prop="enterprise_name"></el-table-column>
        <el-table-column label="创建者" prop="username"></el-table-column>
        <el-table-column label="状态">
          <template slot-scope="scope">
            <span :class="{red:scope.row.status==0}">{{scope.row.status == 0?'禁用':'启用'}}</span>
          </template>
        </el-table-column>
        <el-table-column label="访问量" prop="reads"></el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button type="text" @click="edit(scope.row)">编辑</el-button>
            <el-button
              type="text"
              @click="resetStatus(scope.row.id)"
            >{{scope.row.status == 1?'禁用':'启用'}}</el-button>
            <el-button type="text" @click="del(scope.row.id)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页器 -->
      <div class="pagination">
        <el-pagination background
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="pagination.currentPage"
          :page-sizes="pagination.pageSizes"
          :page-size="pagination.pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="pagination.total"
        ></el-pagination>
      </div>
    </el-card>
    <questionAdd
      ref="questionAdd"
      :subList="subList"
      :stepObj="stepObj"
      :busList="busList"
      :typeObj="typeObj"
      :diffObj="diffObj"
    ></questionAdd>
  </div>
</template>

<script>
import { getSubjectList } from "@/api/subject.js";
import { geteList } from "@/api/bussiness.js";
import { getQuestionList, resetStatus, delQuestion } from "@/api/question.js";
import questionAdd from "./questionAdd.vue";
export default {
  components: {
    questionAdd,
  },
  data() {
    return {
      // form表单
      form: {
        subject: "", //	否	int	学科id
        step: "", //	否	string	题目阶段:1(初级),2(中级),3(高级)
        enterprise: "", //	否	int	企业id
        type: "", //	否	int	题目类型:1(单选),2(多选),3(简答)
        difficulty: "", //	否	int	题目难度: 1(简单),2(一般),3(困难)
        username: "", //	否	string	作者
        status: "", //	否	int	状态:0(禁用),1(启用)
        create_date: "", //	否	string	创建日期
        title: "", //	否	string	标题名称
      },
      // 阶段
      stepObj: {
        1: "初级",
        2: "中级",
        3: "高级",
      },
      // 题目类型
      typeObj: {
        1: "单选",
        2: "多选",
        3: "简答",
      },
      // 困难程度
      diffObj: {
        1: "简单",
        2: "一般",
        3: "困难",
      },
      // 题目列表
      questionList: [],
      // 学科列表
      subList: [],
      // 企业列表
      busList: [],
      pagination: {
        currentPage: 1,
        pageSize: 10,
        pageSizes: [1, 10, 20, 30],
        total: 100,
      },
    };
  },
  created() {
    getSubjectList({ limit: 1000 }).then((res) => {
      // console.log("this",this);
      this.subList = res.data.data.items;
    });
    geteList({ limit: 1000 }).then((res) => {
      this.busList = res.data.data.items;
    });
    this.getData();
  },
  methods: {
    getData() {
      let query = {
        ...this.form,
        limit: this.pagination.pageSize,
        page: this.pagination.currentPage,
      };
      getQuestionList(query).then((res) => {
        let list = res.data.data.items;
        list.forEach(item=>{
          // 后台返回的city和多选都是一个字符串，但是渲染到页面上需要的是数组，所以在获取到的时候就进行处理
          item.city = item.city.split(',')
          item.multiple_select_answer = item.multiple_select_answer.split(',')
        })
        this.questionList = list;
        // console.log(res);
        this.pagination.total = res.data.data.pagination.total;
      });
    },
    handleSizeChange(size) {
      this.pagination.pageSize = size;
      this.pagination.currentPage = 1;
      this.getData();
    },
    handleCurrentChange(page) {
      this.pagination.currentPage = page;
      this.getData();
    },
    //搜索
    search() {
      // alert(111)
      this.pagination.currentPage = 1;
      this.getData();
    },
    //清除筛选
    reset() {
      this.$refs.form.resetFields();
      this.search();
    },
    //修改状态
    resetStatus(id) {
      resetStatus({ id }).then(() => {
        this.$message.success("修改成功");
      });
      this.getData();
    },
    //删除题目
    del(id) {
      this.$confirm("确认删除吗", "提示", { type: "warning" })
        .then(() => {
          delQuestion({ id }).then(() => {
            this.$message.success("删除成功");
          });
          this.search();
        })
        .catch(() => {});
    },
    //新增题库
    add() {
      this.$refs.questionAdd.isShow = true;
      this.$refs.questionAdd.mode = 'add'
    },
    //编辑题库
    edit(row){
      // console.log(row);
      this.$refs.questionAdd.isShow = true;
      this.$refs.questionAdd.mode = 'edit';
      this.$refs.questionAdd.form = JSON.parse(JSON.stringify(row));
    }
  },
};
</script>

<style lang="less">
.question {
  .el-select {
    width: 100%;
  }
  .pagination {
    text-align: center;
    padding-top: 30px;
  }
  .red {
    color: red;
  }
  .table {
    margin-top: 30px;
  }
}
</style>